<template>
    <div class="message-form">
        <el-form ref="form" :model="message" label-width="120px">

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>留言用户</template>
                        <el-input v-model="message.userName" maxlength="64" style="width:500px" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>手机号</template>
                        <el-input v-model="message.userPhone" maxlength="64" style="width:500px" readonly></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>用户邮箱</template>
                        <el-input v-model="message.userEmail" maxlength="64" style="width:500px" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-row>
                <el-col :span="24">
                    <el-form-item label="留言内容:">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="message.messageContent"
                                  style="width:90%" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>



        </el-form>


        <div class="bottom-btn">
                <span slot="footer" class="dialog-footer">
                        <el-button @click="editDataBoxClose">关 闭</el-button>
                       <!-- <el-button @click="clearDate">清 空</el-button>
                        <el-button type="primary" @click="onEditSubData">保 存 数 据</el-button>-->
                </span>
        </div>


    </div>
</template>

<script>
    import messageApi from '@/api/message/messageApi'
    export default {
        name: "MessageForm",
        data() {
            return {
                message: {
                    id: '',
                    userName:'',
                    userPhone: '',
                    userEmail:'',
                    messageContent:'',
                },
            }
        },
        methods: {
            editDataBoxClose() {
                this.$emit('editDataBoxClose', false)
            },
        },
        props: {
            editItemData: {
                require: true
            }
        },
        watch: {
            editItemData: {
                immediate: true,
                handler(newVal, oldVal) {
                    if (newVal != '') {
                        this.message = newVal
                    }
                }
            }
        },
    }
</script>

<style scoped>
    .dialog-footer{
        margin-left: 200px;
    }

</style>